<ion-content data-testid="c-intro" forceOverscroll="false" class="ion-padding">
	<ion-slides
		data-testid="c-intro__slides"
		class="h-full"
		(ionSlideDidChange)="onSlideChanged()"
	>
		<ion-slide
			data-testid="c-intro__slides__slide"
			*ngFor="let slide of slides"
		>
			<ion-grid class="h-full flex flex-col justify-center items-center">
				<div class="flex flex-col justify-center items-center">
					<img [class]="'slide-image ' + slide.image" />
					<ion-text color="dark">
						<h3 class="text-xl font-semibold">{{ slide.title }}</h3>
					</ion-text>
					<ion-text color="medium">
						<p class="leading-normal mt-2 px-6">
							{{ slide.description }}
						</p>
					</ion-text>
				</div>
			</ion-grid>
		</ion-slide>
	</ion-slides>
</ion-content>

<ion-footer class="ion-no-border ion-no-shadow">
	<ion-grid>
		<div class="flex items-center">
			<ion-col class="flex-1">
				<ion-button
					data-testid="c-intro__skip"
					id="skip"
					fill="clear"
					(click)="startApp()"
					[disabled]="!showSkip"
					>{{ 'SKIP' | translate | uppercase }}</ion-button
				>
			</ion-col>
			<ion-col class="w-32">
				<ion-grid
					data-testid="c-intro__pagination"
					fixed
					class="slide-pagination h-full text-center"
				>
					<ion-row
						class="flex items-center justify-center flex-shrink-0"
					>
						<ion-col
							data-testid="c-intro__pagination__page"
							*ngFor="let page of slides; let i = index"
							[class.active]="activeIndex == i"
						>
							<span></span>
						</ion-col>
					</ion-row>
				</ion-grid>
			</ion-col>
			<ion-col class="flex-1 text-right">
				<ion-button
					data-testid="c-intro__next"
					id="next"
					fill="clear"
					(click)="goNext()"
					*ngIf="showSkip"
					>{{ 'NEXT' | translate | uppercase }}</ion-button
				>
				<ion-button
					data-testid="c-intro__done"
					id="done"
					fill="clear"
					(click)="startApp()"
					*ngIf="!showSkip"
					>{{ 'DONE' | translate | uppercase }}</ion-button
				>
			</ion-col>
		</div>
	</ion-grid>
</ion-footer>
